<template>
  <div class="container">
    <div class="title">
      <h1 class="result-wrap">五子棋</h1>
    </div>
    <div>
      <el-button class="restart" type="primary">重新开始</el-button>
      <el-button type="warning">我要悔棋</el-button>
    </div>

    <canvas id="canvas" ref="canvas" width="800px" height="800px">
    </canvas>
  </div>

</template>
<script setup>
import { ElMessage } from "element-plus";
import { onMounted } from "vue";

var canvas = document.querySelector("#canvas");
var resultTxt = document.querySelector(".result-wrap");
var ctx
var border = 100;
var width = 40;
let me = true;
var _nowi = 0;
var _nowj = 0;
var _compi = 0, _compj = 0;
var _mywin = [], _compwin = [];
var mywin = [], compwin = [];
var over = false;
// 棋盘数组
var chess = [];
for (let i = 0; i < 16; i++) {
  chess[i] = [];
  for (let j = 0; j < 16; j++) {
    chess[i][j] = 0;
  }
}
// 绘制棋盘
function draw() {
  if (canvas.getContext) {
    ctx.beginPath()
    for (let i = 0; i < 16; i++) {
      ctx.moveTo(border + width * i, border)
      ctx.lineTo(border + width * i, 700)
      ctx.moveTo(border, border + width * i)
      ctx.lineTo(700, border + width * i)
      ctx.stroke()
    }
  }
}
// 赢法数组
var wins = []
var count = 0
for (let i = 0; i < 16; i++) {
  wins[i] = []
  for (let j = 0; j < 16; j++) {
    wins[i][j] = []
  }
}
for (let i = 0; i < 16; i++) {
  for (let j = 0; j < 12; j++) {
    for (let k = 0; k < 5; k++) {
      wins[i][j + k][count] = true
    }
    count++
  }
}
console.log(count)
for (let i = 0; i < 16; i++) {
  for (let j = 0; j < 12; j++) {
    for (let k = 0; k < 5; k++) {
      wins[j + k][i][count] = true
    }
    count++
  }
}
console.log(count)
for (let i = 0; i < 12; i++) {
  for (let j = 0; j < 12; j++) {
    for (let k = 0; k < 5; k++) {
      wins[j + k][i + k][count] = true
    }
    count++
  }
}
console.log(count)
for (let i = 0; i < count; i++) {
  mywin[i] = 0;
  _mywin[i] = 0;
  compwin[i] = 0;
  _compwin[i] = 0;
}
// 绘制棋子
function oneStep(i, j, me) {
  console.log(i, j)
  ctx.beginPath()
  ctx.arc(border + width * i, border + width * j, 15, 0, 2 * Math.PI)
  ctx.stroke()
  var gradient = ctx.createRadialGradient(border + width * i + 2, border + width * j - 2, 13, border + width * i + 2, border + width * j - 2, 4);
  if (me) {
    gradient.addColorStop(0, '#0a0a0a');
    gradient.addColorStop(1, '#636766');
  } else {
    gradient.addColorStop(0, '#d1d1d1');
    gradient.addColorStop(1, '#f9f9f9');
  }
  ctx.fillStyle = gradient;
  ctx.fill();

}
function click(e) {
  if (over) {
    ElMessage.warning('游戏已结束，请重新开始')
    return;
  }
  var x = e.offsetX;
  var y = e.offsetY;
  // 定义点击区域，超出无效
  if (x < (border - width / 2) || y < (border - width / 2) || x > (700 + width / 2) || y > (700 + width / 2)) {
    return;
  }
  var i = Math.floor((x - (border - width / 2)) / width);
  var j = Math.floor((y - (border - width / 2)) / width);
  _nowi = i;
  _nowj = j;
  if (chess[i][j] === 0) {
    oneStep(i, j, me)
    chess[i][j] = 1;
    for (let k = 0; k < count; k++) {
      if (wins[i][j][k]) {
        mywin[k]++
        _compwin[k] = compwin[k]
        compwin[k] = 6
        console.log('my计数器', k, ':', mywin[k])
        if (mywin[k] == 5) {
          ElMessage.success("你赢了！")
          over = true
        }
      }

    }
  } else {
    ElMessage.error("该位置已有棋子，请重新选择！");
    return;
  }
  if (!over) {
    // console.log('me1:', me)
    me = !me;
    // console.log('me2:', me)
    computerAI();
  }

  // console.log(me)
}
var computerAI = function () {
  var myScore = [];
  var computerScore = [];
  var max = 0;
  var u = 0, v = 0;
  for (let i = 0; i < 15; i++) {
    myScore[i] = [];
    computerScore[i] = [];
    for (var j = 0; j < 15; j++) {
      myScore[i][j] = 0;
      computerScore[i][j] = 0;
    }
  }
  for (let i = 0; i < 15; i++) {
    for (let j = 0; j < 15; j++) {
      if (chess[i][j] == 0) {
        for (var k = 0; k < count; k++) {
          if (wins[i][j][k]) {
            if (mywin[k] == 1) {
              myScore[i][j] += 200;
            } else if (mywin[k] == 2) {
              myScore[i][j] += 400;
            } else if (mywin[k] == 3) {
              myScore[i][j] += 2000;
            } else if (mywin[k] == 4) {
              myScore[i][j] += 10000;
            }

            if (compwin[k] == 1) {
              computerScore[i][j] += 220;
            } else if (compwin[k] == 2) {
              computerScore[i][j] += 420;
            } else if (compwin[k] == 3) {
              computerScore[i][j] += 2100;
            } else if (compwin[k] == 4) {
              computerScore[i][j] += 20000;
            }
          }
        }

        if (myScore[i][j] > max) {
          max = myScore[i][j];
          u = i;
          v = j;
        } else if (myScore[i][j] == max) {
          if (computerScore[i][j] > computerScore[u][v]) {
            u = i;
            v = j;
          }
        }

        if (computerScore[i][j] > max) {
          max = computerScore[i][j];
          u = i;
          v = j;
        } else if (computerScore[i][j] == max) {
          if (myScore[i][j] > myScore[u][v]) {
            u = i;
            v = j;
          }
        }
      }
    }
  }
  _compi = u;
  _compj = v;
  oneStep(u, v, false);
  chess[u][v] = 2;  //计算机占据位置
  for (let k = 0; k < count; k++) {
    if (wins[u][v][k]) {
      compwin[k]++;
      _mywin[k] = mywin[k];
      mywin[k] = 6;//这个位置对方不可能赢了
      console.log('comp计数器', k, ':', compwin[k])
      if (compwin[k] == 5) {
        ElMessage.success('o(╯□╰)o，计算机赢了，继续加油哦！');
        over = true;
      }
    }
  }
  if (!over) {
    // console.log('comp1', me)
    me = !me;
    // console.log('comp2', me)
  }
}
onMounted(() => {
  ctx = canvas.getContext("2d");
  draw()
  canvas.onclick = function (e) {
    console.log(e)
    click(e)
  }
  document.querySelector(".restart").onclick = function () {
    location.reload();
  };
})


</script>
<style>
.container {
  width: 95vw;
  height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  #canvas {
    /* border: 1px solid black; */
    /* margin: 20px auto; */
    background-color: #fff;
  }
}
</style>